<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        span{font-weight: bold}
        .r{color: red;font-size: 30px;}
        .b{color:blue;font-size: 30px;}
        .bd{text-align: center;width: 90%;height: 80%}
        .text{width: 60%;height: 60px;float:left;border-bottom-left-radius: 8px;border-top-left-radius: 8px;}
        .sub{width: 20%;height: 65px;float: left;border-bottom-right-radius: 8px;border-top-right-radius: 8px;background-color: blue;color:#fff;}
        .l{float: left; width: 49%}
        .center{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        a{
            text-decoration: none;
        }
        .div1{
            width: 100%;
            height: 60%;
        }
    </style>
    <title>24092101</title>
</head>
<body class="center">
<div class="bd">
    <div>
        <a href="#">
            <span class="r">bai</span>
            <span class="b">du</span>
            <span class="r">百度</span>
        </a>
    </div>
    <div class="center">
        <form action="https://www.baidu.com/" class="div1">
            <label for="text"></label><input type="text" id="text" name="text" class="text">
            <label for="sub"></label><input type="submit" id="sub" class="sub">
        </form>
    </div>
    <br>
    <div>
        <div>
            <div class="l" style="text-align: left">
                <span class="c">百度热搜 ></span>
            </div>
            <div class="l" style="text-align: right">
                <span>换一换</span>
            </div>
        </div>
        <br>
        <div>
            <div class="l">
                <ol>
                    <li>答复尽快发货</li>
                    <li>答复尽快发货</li>
                    <li>答复尽快发货</li>
                </ol>
            </div>
            <div class="l">
                <ol>
                    <li>答复尽快发货</li>
                    <li>答复尽快发货</li>
                    <li>答复尽快发货</li>
                </ol>
            </div>
        </div>
    </div>
</div>
</body>
</html>